<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="/static/js/echarts.min.js" th:src="@{js/echarts.min.js}"></script>
    <script src="/static/js/china.js" th:src="@{js/map/china.js}"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>top10</title>
    <!-- Bootstrap core CSS -->
    <link href="asserts/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="asserts/css/dashboard.css" th:href="@{/css/dashboard.css}" rel="stylesheet">
</head>

<body>

<!--引入topbar-->
<div th:replace="~{commons/bar::topbar}"></div>
<div class="container-fluid">
    <div class="row">
        <!--引入sidebar-->
        <div th:replace="~{commons/bar::#sidebar(activeUri='top10')}"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

            <div style="width: 1218px; height: 700px">
                <div id="container1" style="width: 50%; height: 300px; float: right"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container1'));
                    option = {
                        title: {
                            text: '全国累计确诊省市TOP10',
                            top: '4%'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: ['重庆', '江苏', '山东', '江西', '安徽', '湖南', '浙江', '河南', '广东', '湖北']
                        },
                        series: [
                            {
                                name: '累计确诊',
                                type: 'bar',
                                data: [578, 640, 771, 936, 990, 1018, 1243, 1275, 1448, 67801]
                            }
                        ]
                    };
                    myChart.setOption(option)
                </script>

                <div id="container3" style="width: 50%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container3'));
                    option = {
                        title: {
                            text: '境外输入累计确诊省市TOP10',
                            top: '4%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: ['陕西', '江苏', '山东', '内蒙古', '浙江', '天津', '福建', '甘肃', '上海', '北京']
                        },
                        series: [
                            {
                                name: '境外输入累计确诊',
                                type: 'bar',
                                data: [8, 14, 14, 22, 37, 37, 44, 46, 159, 161]
                            }
                        ]
                    };
                    myChart.setOption(option)
                </script>

                <div id="container6" style="width: 50%; height: 300px; float: right"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container6'));
                    option = {
                        title: {
                            text: '全国累计死亡数省市TOP10',
                            top: '4%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                            },
                        },
                        yAxis: {
                            type: 'category',
                            data: ['重庆', '河北', '台湾', '山东', '上海', '广东', '北京', '黑龙江', '河南', '湖北']
                        },
                        series: [
                            {
                                name: '死亡数',
                                type: 'bar',
                                data: [6, 6, 6, 7, 7, 8, 8, 13, 22, 3221]
                            }
                        ]
                    };
                    myChart.setOption(option)
                </script>

                <div id="container2" style="width: 50%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container2'));
                    option = {
                        title: {
                            text: '全国累计治愈数省市TOP10',
                            top: '4%'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                interval: 'auto'
                            },


                        },
                        yAxis: {
                            type: 'category',
                            data: ['重庆', '江苏', '山东', '江西', '安徽', '湖南', '浙江', '河南', '广东', '湖北']
                        },
                        series: [
                            {
                                name: '治愈数',
                                type: 'bar',
                                data: [570,642,761,936,984,1014,1242,1254,1458,64363]
                            }
                        ]
                    };
                    myChart.setOption(option)
                </script>

                <div id="container4" style="width: 50%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container4'));
                    option = {
                        title: {
                            text: '全国累计治愈率省市TOP10',
                            top: '4%'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            },
                            formatter: '{b0}<br /> {a0}:{c0}%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                                formatter: '{value} %'
                            },
                            min: 90,
                            max: 100

                        },
                        yAxis: {
                            type: 'category',
                            data: ['广西', '山西', '江苏', '重庆', '安徽', '湖南', '江西', '西藏', '青海', '宁夏']
                        },
                        series: [
                            {
                                name: '治愈率',
                                type: 'bar',
                                data: [98.425, 98.518, 98.593, 98.615, 99.394, 99.607, 99.786,
                                    100.000, 100.000, 100.000]
                            }
                        ]
                    };
                    myChart.setOption(option)
                </script>

                <div id="container5" style="width: 50%; height: 300px; float: right"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container5'));
                    option = {
                        title: {
                            text: '全国累计死亡率省市TOP10',
                            top: '4%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            },
                            formatter: '{b0}<br /> {a0}:{c0}%'
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                                formatter: '{value} %'
                            },
                            min: "1",
                            max: "5"
                        },
                        yAxis: {
                            type: 'category',
                            data: ['北京', '甘肃', '辽宁', '河南', '河北', '天津', '黑龙江', '海南', '新疆', '湖北']
                        },
                        series: [
                            {
                                name: '死亡率',
                                type: 'bar',
                                data: [1.41, 1.47, 1.550, 1.72, 1.88, 1.97, 2.68, 3.57,
                                    3.94, 4.68]
                            }
                        ]
                    };
                    myChart.setOption(option)
                </script>


            </div>
        </main>
    </div>
</div>
</body>
</html>






